<template>
  <div class="image-container">
    <div class="afterProcess">
      <img src="@/assets/afterProcess_coor.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/heatMap.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/ks_test.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/ks_train.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/loss_curve.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/origin_coor.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/pr_test.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/pr_train.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/roc_test.png" />
    </div>
    <div class="afterProcess">
      <img src="@/assets/roc_train.png" />
    </div>
  </div>
</template>

<script>

</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 70px; /* Space between images */
  justify-content: center; /* Center images horizontally */
}

.afterProcess {
  width: 575px;
  height: 480px;
}

.afterProcess img {
  width: 100%;
  height: 100%;
  border: 1px solid #CCC;
  padding: 3px;
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.afterProcess img:hover {
  box-shadow: 0px 0px 5px 0px #333;
}
</style>

